<template>
	<model-page>
		<view class="medicineInfo">
			<Card>
				<view class="baseInfo_topic">
					基础信息
				</view>
				<image src="../../../static/image/alarm/line.png" mode="" class="line"></image>
				<!-- 用户信息-->
				<view class="baseInfo">
					<view class="floor1">
						<view class="left">
							<view v-for="(item,index) in baseInfoList[0]" class="row">
								<view class="label">
									{{item.label}}
								</view>
								<view class="content">
									{{olderInfo[item.props]}}
								</view>
							</view>
						</view>
					</view>
					<view class="floor2" v-if="isExpend">
						<view v-for="(item,index) in baseInfoList[1]" class="row space">
							<view class="label">
								{{item.label}}
							</view>
							<view class="content">
								{{olderInfo[item.props]}}
							</view>
						</view>
						<view class="foldable" @click="expend(false)">
							收起 <image src="../../../static/image/arrow_bottom.png" mode=""></image>
						</view>
					</view>
					<view v-else class="expend" @click="expend(true)">
						<text>查看详情</text><image src="../../../static/image/arrow_top.png" mode=""></image>
					</view>
				</view>
			</Card>
			<!-- 药品信息************************** -->
			<view>
			<view class="topic">
			<view class="topic_left">
				<text>药品信息：</text>
				<text>照片仅院内和老人可见</text>
			</view>
			<view class="topic_right" v-if="medicineInfo.pickupStatus !== '2'">
				<text>1</text><text>/</text><text>1</text>
			</view>
			</view>
			<Card>
				<view class="medicineInfo">
					<image :src="drugInfoFileLists[0]" mode="aspectFit" @click="previewImg(medicineInfo.drugInfo)" v-if="medicineInfo.pickupStatus === '2' || drugInfoFileLists.length"></image>
					<uni-file-picker limit="5" :del-icon="true" 
					file-mediatype="image" :value="drugInfoFileLists" @select="selectDrugInfo" @delete="deleteDrugInfo" v-else></uni-file-picker>
				</view>
			</Card>	
			</view>
			<!-- 收证件照片***************************************** -->
			<view >
				<view class="topic">
				<view class="topic_left">
					<text>收证件照片：</text>
					<text>照片仅院内和老人可见</text>
					
				</view>
				<view class="topic_right" v-if="!['1','2'].includes(medicineInfo.pickupStatus)">
					<text>{{idInfoFileLists.length}}</text><text>/</text><text>5</text>
				</view>
				</view>
				<Card>
					<view class="imgList" v-if="['1','2'].includes(medicineInfo.pickupStatus)" >
						<view v-for="(item,index) in idInfoFileLists" :key="index">
						<image :src="item" mode="aspectFit" @click="previewImg(item)"></image>	
						</view>
					</view>
					<uni-file-picker limit="5" :del-icon="true"
					file-mediatype="image" :value="idInfoFileLists" @select="selectIdInfo" @delete="deleteIdInfo" v-else></uni-file-picker>
				</Card>
			</view>
			<!-- 返还证件照片 -->
				<view v-if="['1','2'].includes(medicineInfo.pickupStatus)">
					<view class="topic">
					<view class="topic_left">
						<text>返还证件照片：</text>
						<text>照片仅院内和老人可见</text>
						
					</view>
					<view class="topic_right" v-if="medicineInfo.pickupStatus !== '2'">
						<text>{{returnInfoFileLists.length}}</text ><text>/</text><text>5</text>
					</view>
					</view>
					<Card>
						<view class="imgList" v-if="medicineInfo.pickupStatus === '2'" >
							<view v-for="(item,index) in returnInfoFileLists" :key="index">
							<image :src="item" mode="aspectFit" @click="previewImg(item)"></image>	 
							</view>
						</view>
						<uni-file-picker limit="5" :del-icon="true" 
						file-mediatype="image" :value="returnInfoFileLists" @select="selectReturnInfo" @delete="deleteReturnInfo" v-else></uni-file-picker>
						
					</Card>
				</view>

			<!-- 审批人流程-->
			<view class="pass" v-if="medicineInfo.pickupStatus === '2'">
				<Card>
					<view class="listWrap">
						<view class="row space" v-for="(item,index) in passList">
							<view class="label">
								{{item.label}}
							</view>
							<view class="content">
								{{medicineInfo[item.props]}}
							</view>
						</view>
					</view>
				</Card>
			</view>
			<view class="remark">
			<Card>
				<view class="topic delBm">
					备注
				</view>
				<image src="../../../static/image/alarm/line.png" mode="" class="line"></image>
				<textarea v-model="remarkWrite" placeholder="请输入处理结果" v-if="medicineInfo.pickupStatus !== '2'" :maxlength="200"/>
				<view class="remarkResult" v-else>
					{{medicineInfo.comment}}
				</view>
			</Card>
			</view>
			<view class="btn_group">
				<view class="process_state" v-if="medicineInfo.pickupStatus !== '2'">
					<view @click="agree">
						同意
					</view>
				</view>
			</view>
		</view>
	</model-page>

</template>

<script setup>
import {reactive, ref} from 'vue'
import Card from '@/component/Card.vue'
import {onLoad} from '@dcloudio/uni-app'
import {getDrugDetail,handleDrugApply} from '@/api/medicine.js'
import {getElderInfo,uploadAvatar} from '@/api/index.js'
const isExpend = ref(false)
const textResult = ref("")
const expend = (flag)=>{
	isExpend.value = flag
}
onLoad((options)=>{
	const {drugApplyId,elderId} = options
	getolderInfo(elderId)
	reqmedicineInfo(drugApplyId)
})
// 获取药品详情数据
const medicineInfo = ref({})
const reqmedicineInfo = async(drugApplyId)=>{
	try{
	const {code,data:res,msg} = await getDrugDetail({drugApplyId})
	if(code === 200){
		medicineInfo.value = res
		drugInfoFileLists.value = res.drugInfo ? [res.drugInfo] : []
		idInfoFileLists.value = res.idInfo?.split(",") || []
		returnInfoFileLists.value = res.returnInfo?.split(",") || []
	}else{
		uni.showToast({
			icon:'error',
			title:msg
		})
	}
	}catch(e){
		//TODO handle the exception
	}
}
// 获取老人信息
const olderInfo = ref({})
const getolderInfo = async(elderId)=>{
	try{
	const {code,data:res} = await getElderInfo({elderId})
	if(code === 200){
		olderInfo.value = res

	}
	}catch(e){
		//TODO handle the exception
	}
}
// 图片上传功能
	// 上传药品信息
	const drugInfoFileLists= ref([])
	const selectDrugInfo = (e)=>{
		select(e,drugInfoFileLists.value)
	}
	const deleteDrugInfo = (e)=>{
		const index = e.index
		drugInfoFileLists.value.splice(index,1)
	}
	//上传证件信息
	const idInfoFileLists= ref([])
	const selectIdInfo = (e)=>{
		select(e,idInfoFileLists.value)
	}
	const deleteIdInfo = (e)=>{
		const index = e.index
		idInfoFileLists.value.splice(index,1)
	}
	//上传返还信息
	const returnInfoFileLists= ref([])
	const selectReturnInfo = (e)=>{
		select(e,returnInfoFileLists.value)
	}

	const deleteReturnInfo = (e)=>{
		const index = e.index
		returnInfoFileLists.value.splice(index,1)
		console.log(index,returnInfoFileLists.value);
	}
	// 上传头像功能
	const select = async(e,list)=>{
	 const uploadPromises = e.tempFilePaths.map(async (val) => {
	    const { code, data: res } = await uploadAvatar({
	      avatarfile: val
	    });
	    return { success: code === 200, result: code === 200 ? res : null };
	  });
	  const results = await Promise.allSettled(uploadPromises); // 并行执行所有上传操作
	  const newList  = results.filter((result) => result.status === 'fulfilled' && result.value.success)
	    .map((result) => result.value.result); // 提取成功的结果
		newList.forEach(val=>{
			list.push(val)
		})
	}
	// 预览图片
	const previewImg = (imgUrl)=>{
		uni.previewImage({
			urls:[imgUrl]
		})
	}
const remarkWrite = ref("")
// 同意请求
const agree = async()=>{
	let postData = {}
	// 待处理
	if(medicineInfo.value.pickupStatus === "0"){
		postData = {
			  drugApplyId: medicineInfo.value.drugApplyId,
			  drugInfo: drugInfoFileLists.value[0],
			  idInfo: idInfoFileLists.value.join(","),
			  comment: remarkWrite.value,
			  pickupStatus: "1"
		}
	}
	// 代发放
	if(medicineInfo.value.pickupStatus === "1"){
		postData = {
			  drugApplyId: medicineInfo.value.drugApplyId,
			  returnInfo: returnInfoFileLists.value.join(","),
			  issuedRemark: remarkWrite.value,
			  pickupStatus: "2"
		}
	}
	const flag = tooltipShow(postData)
	if(!flag) return
	const {code,data:res,msg} = await handleDrugApply(postData,medicineInfo.value.pickupStatus)
	if(code === 200){
		if(res){
			uni.showToast({
				icon:"success",
				title:"操作成功",
				duration:1000,
				complete() {
					setTimeout(()=>{
						uni.navigateTo({
							url:"/packageTakeMedicine/pages/index/index"
						})
					},1000)
				}
			})
		}
	}else{
			uni.showToast({
				icon:"error",
				title:msg
			})
		}
}
const tooltipShow = (postData)=>{
	let enums = [{props:"drugInfo",title:"药品信息"},{props:"idInfo",title:"收证件照片"},{props:"returnInfo",title:"返还证件照片"}]
	const strList = enums.reduce((curr,val)=>{
		for (let key in postData){
			if(key === val.props){
				console.log("fas",postData,val.props,postData[val.props]);
				if(!postData[val.props]){
					curr.push(val.title)
				}
			}
		}
		return curr
	},[])
	if(strList.length === 0){
		return true
	}else{
		const str = strList.join("`")
		uni.showToast({
			icon:"error",
			title:str + '必须上传',
			duration:1000
		})
		return false
	}
}
const baseInfoList = [
	[
		{
			label:"姓名",
			props:"elderName"
		},
		{
			label:"房间",
			props:"buildRoomNum"
		},
		{
			label:"性别",
			props:"gender"
		},
		{
			label:"年龄",
			props:"age"
		},
	],
	[
		{
			label:"联系电话",
			props:"phoneNumber"
		},
		{
			label:"身份证号",
			props:"cardId"
		},
		{
			label:"身高",
			props:"height"
		},
		{
			label:"体重",
			props:"weight"
		},
		{
			label:"家庭住址",
			props:"homeAddress"
		},
	]
]
const passList = ref([
	{
		label:"审批人",
		props:"auditor"
	},
	{
		label:"审批时间",
		props:"auditTime"
	},
])

</script>

<style lang="less" scoped>
	.medicineInfo{
		.baseInfo_topic{
			font-weight: 500;
			font-size: 28rpx;
			color: #333333;
		}
		.line{
			height: 1rpx;
			width: 100%;
		}
		.baseInfo{
			margin-top: 28rpx;
			.floor1{
				display: flex;
				justify-content: space-between;
				.left{
					width: 100%;
                 view{
					 display: flex;
					 justify-content: space-between;
				 }
				}
				.right{
					image{
						width: 228rpx;
						height: 184rpx;
					}
				}
			}
			.floor2{
				.foldable{
					height: 80rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					font-weight: 400;
					font-size: 24rpx;
					color: #333333;
					text-align: right;
					>image{
						width: 24rpx;
						height: 14rpx;
						margin-left: 14rpx;
					}
				}
			}
			.expend{
				display: flex;
				justify-content: center;
				align-items: center;
				height: 80rpx;
				font-weight: 400;
				font-size: 24rpx;
				color: #333333;
				>image{
					width: 24rpx;
					height: 14rpx;
					margin-left: 14rpx;
				}
			}

			.baseInfo_topic{
				text{
					color: #666666;
					font-size: 28rpx;
					font-weight: 500;
				}
			}

		}
	}
					.row{
						display: flex;
						font-weight: 400;
						font-size: 28rpx;
						margin-bottom: 14rpx;
						.label{
							color: #999999;
							margin-right: 22rpx;
							width: 150rpx;
						}
						.content{
							color: #333333;
							text-align: right;
						}
					}
					.space{
						justify-content: space-between;
					}
					.topic{
						margin: 28rpx 0;
						display: flex;
						justify-content: space-between;
						.topic_left{
							display: flex;
							flex-direction: column;
							align-items: flex-start;
							text{
								font-weight: 400;
								&:first-child{
									font-size: 32rpx;
									color: #333333;
								}
								&:last-child{
									margin-top: 5rpx;
									font-size: 24rpx;
									color: #666666;
								}
							}
						}
						.topic_right{
							font-weight: 400;
							font-size: 32rpx;
							&:first-child{
								color: #999999;
							}
							&:nth-child(2){
								color: #666666;
							}
								
							&:last-child{
								color: #333333;
							}
						}
					}
					.listWrap{
						margin-top: 15rpx;
					}
					.pass{
						margin-top: 45rpx;
					}
					.remark{
						margin-top: 45rpx;
					}
					.btn_group{
						.process_state{
							width: 100%;
							display: flex;
							view{
								flex: 1;
								height: 80rpx;
								border-radius: 40rpx;
								font-weight: 500;
								font-size: 32rpx;
								text-align: center;
								line-height: 80rpx;
								&:first-child{
									background-color: #F2F8FF;
									color: #666666;
									margin-right: 20rpx;
								}
								&:last-child{
									background: linear-gradient( 180deg, #74B7FF 0%, #1680F3 100%);
									color: #FFFFFF;
							
								}
							}
						}

					}
					.remarkResult{
						padding: 10rpx 0;
						color: #333333;
						font-size: 28rpx;
					}
					.medicineInfo{
						min-height: 300rpx;
					}
					.imgList{
						display: flex;
						flex-wrap: wrap;
						>view{
						width: 208rpx;
						height: 208rpx;	
						margin-right: 20rpx;
						image{
							width: 100%;
							height: 100%;
						}
						}

					}
					:deep(.icon-del-box){
						top: 0;
						right: 0;
						width: 25rpx;
						height: 25rpx;
					}
					:deep(.icon-del){
						width: 12rpx;
						height: 1.5rpx;
					}
</style>
